{% extends 'base.html' %}

{% block title %}Sign In — {{ site_settings.institute_name }}{% endblock %}

{% block extra_css %}
<style>
  nav, footer { display: none !important; }
  body { background: #fff; margin: 0; }

  .auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(280px, 1.05fr) minmax(320px, 1fr);
  }

  /* ── Left: brand story ── */
  .auth-brand {
    position: relative;
    color: #fff;
    background:
      radial-gradient(circle at 85% 12%, rgba(56, 189, 248, .22), transparent 42%),
      radial-gradient(circle at 10% 90%, rgba(251, 191, 36, .14), transparent 38%),
      linear-gradient(160deg, var(--brand-secondary, #0f2557) 0%, var(--brand-primary, #1e40af) 55%, #1d4ed8 100%);
    padding: 3rem 3.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }
  .auth-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
    pointer-events: none;
  }
  .auth-brand-inner { position: relative; z-index: 1; max-width: 34rem; }
  .auth-brand-kicker {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .75;
    margin-bottom: .85rem;
  }
  .auth-brand h1 {
    font-size: clamp(1.75rem, 2.6vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0 0 1rem;
  }
  .auth-brand-lead {
    font-size: .98rem;
    line-height: 1.65;
    opacity: .88;
    margin-bottom: 2rem;
    max-width: 32rem;
  }
  .auth-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(255,255,255,.04);
  }
  .auth-feature {
    padding: 1.1rem 1.15rem;
    border-right: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .auth-feature:nth-child(2n) { border-right: none; }
  .auth-feature:nth-last-child(-n+2) { border-bottom: none; }
  .auth-feature i {
    font-size: 1.25rem;
    display: block;
    margin-bottom: .45rem;
    opacity: .95;
  }
  .auth-feature strong {
    display: block;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .2rem;
  }
  .auth-feature span {
    font-size: .8rem;
    opacity: .78;
    line-height: 1.4;
  }
  .auth-brand-foot {
    margin-top: 2rem;
    font-size: .75rem;
    opacity: .55;
  }
  .auth-brand-foot a { color: #fff; text-decoration: none; font-weight: 600; }

  /* ── Right: form ── */
  .auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: #fff;
  }
  .auth-form-card {
    width: 100%;
    max-width: 400px;
  }
  .auth-logo-wrap {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .auth-logo-wrap img {
    max-height: 72px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
  }
  .auth-logo-wrap .auth-name-fallback {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.02em;
  }
  .auth-form-card h2 {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0f172a;
    text-align: center;
    margin: 0 0 .35rem;
  }
  .auth-form-card .auth-sub {
    text-align: center;
    color: #64748b;
    font-size: .88rem;
    margin-bottom: 1.75rem;
  }
  .auth-form-card .auth-sub a {
    color: var(--brand-accent, #f59e0b);
    font-weight: 600;
    text-decoration: none;
  }
  .auth-underline .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: .35rem;
  }
  .auth-underline .form-control {
    border: none;
    border-bottom: 1.5px solid #cbd5e1;
    border-radius: 0;
    padding: .55rem 0;
    background: transparent;
    box-shadow: none !important;
    font-size: .95rem;
  }
  .auth-underline .form-control:focus {
    border-bottom-color: var(--brand-primary, #1e40af);
  }
  .auth-underline .input-group .form-control {
    border-right: none;
  }
  .auth-underline .btn-eye {
    border: none;
    border-bottom: 1.5px solid #cbd5e1;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    padding: .55rem .2rem .55rem .6rem;
  }
  .auth-underline .input-group:focus-within .btn-eye,
  .auth-underline .input-group:focus-within .form-control {
    border-bottom-color: var(--brand-primary, #1e40af);
  }
  .auth-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: .35rem 0 1.35rem;
    font-size: .85rem;
  }
  .auth-meta-row a {
    color: var(--brand-accent, #f59e0b);
    font-weight: 600;
    text-decoration: none;
  }
  .auth-meta-row .form-check-label { color: #64748b; }
  .btn-auth-primary {
    width: 100%;
    border: none;
    border-radius: .5rem;
    padding: .85rem 1rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--brand-accent, #f59e0b);
    box-shadow: 0 10px 24px rgba(245, 158, 11, .28);
    transition: transform .15s, filter .15s;
  }
  .btn-auth-primary:hover {
    filter: brightness(.96);
    transform: translateY(-1px);
    color: #fff;
  }
  .auth-alt {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .88rem;
    color: #64748b;
  }
  .auth-alt a {
    color: var(--brand-primary, #1e40af);
    font-weight: 600;
    text-decoration: none;
  }
  .auth-home {
    display: block;
    text-align: center;
    margin-top: 1rem;
    font-size: .82rem;
    color: #94a3b8;
    text-decoration: none;
  }

  @media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { min-height: auto; padding: 2rem 1.5rem 1.75rem; }
    .auth-feature-grid { grid-template-columns: 1fr 1fr; }
    .auth-brand h1 { font-size: 1.6rem; }
  }
  @media (max-width: 520px) {
    .auth-feature-grid { grid-template-columns: 1fr; }
    .auth-feature { border-right: none !important; }
    .auth-feature:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
    .auth-feature:last-child { border-bottom: none; }
  }
</style>
{% endblock %}

{% block content %}
<div class="auth-shell">

  <aside class="auth-brand">
    <div class="auth-brand-inner">
      <div class="auth-brand-kicker">{{ site_settings.institute_name }}</div>
      <h1>Your learning dashboard starts here</h1>
      <p class="auth-brand-lead">
        {% if site_settings.tagline %}{{ site_settings.tagline }}.{% endif %}
        Sign in to track courses, certifications, schedules, and progress in one place.
      </p>

      <div class="auth-feature-grid">
        <div class="auth-feature">
          <i class="bi bi-person-badge"></i>
          <strong>Profile</strong>
          <span>Keep your details and credentials up to date</span>
        </div>
        <div class="auth-feature">
          <i class="bi bi-journal-bookmark"></i>
          <strong>Courses</strong>
          <span>Access enrolled classes and learning material</span>
        </div>
        <div class="auth-feature">
          <i class="bi bi-award"></i>
          <strong>Certificates</strong>
          <span>Sit exams and earn verifiable skill certificates</span>
        </div>
        <div class="auth-feature">
          <i class="bi bi-calendar2-check"></i>
          <strong>Schedules</strong>
          <span>Book testing center slots or remote proctoring</span>
        </div>
        <div class="auth-feature">
          <i class="bi bi-graph-up-arrow"></i>
          <strong>Progress</strong>
          <span>See results, attempts, and next steps clearly</span>
        </div>
        <div class="auth-feature">
          <i class="bi bi-shield-lock"></i>
          <strong>Secure access</strong>
          <span>Role-based login for students, teachers &amp; staff</span>
        </div>
      </div>

      <p class="auth-brand-foot mb-0">
        &copy; {% now "Y" %} {{ site_settings.institute_name }}.
        Design &amp; Developed by <a href="https://nextdot.pk" target="_blank" rel="noopener noreferrer">NEXT DOT CONSULTANT</a>
      </p>
    </div>
  </aside>

  <section class="auth-form-side">
    <div class="auth-form-card">
      <div class="auth-logo-wrap">
        <a href="{% url 'home' %}" class="text-decoration-none d-inline-block">
          {% if site_settings.logo_dark_url %}
            <img src="{{ site_settings.logo_dark_url }}" alt="{{ site_settings.institute_name }}">
          {% else %}
            <div class="auth-name-fallback">{{ site_settings.institute_name }}</div>
          {% endif %}
        </a>
      </div>

      <h2>Login</h2>
      <p class="auth-sub">
        Use your username or email to continue.
        New here? <a href="{% url 'accounts:student_signup' %}">Create an account</a>
      </p>

      {% if messages %}
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show rounded-3 py-2 small" role="alert">
          {{ message }}
          <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
        </div>
        {% endfor %}
      {% endif %}

      <form method="post" novalidate class="auth-underline">
        {% csrf_token %}

        <div class="mb-3">
          <label class="form-label" for="{{ form.username.id_for_label }}">Username or email</label>
          {{ form.username }}
          {% if form.username.errors %}
            <div class="text-danger small mt-1">{{ form.username.errors.0 }}</div>
          {% endif %}
        </div>

        <div class="mb-2">
          <label class="form-label" for="id_password_input">Password</label>
          <div class="input-group">
            <input type="password"
                   id="id_password_input"
                   name="password"
                   class="form-control{% if form.password.errors %} is-invalid{% endif %}"
                   placeholder="Enter your password"
                   autocomplete="current-password"
                   required>
            <button class="btn btn-eye" type="button" id="togglePassword" tabindex="-1" aria-label="Show password">
              <i class="bi bi-eye" id="eyeIcon"></i>
            </button>
          </div>
          {% if form.password.errors %}
            <div class="text-danger small mt-1">{{ form.password.errors.0 }}</div>
          {% endif %}
        </div>

        <div class="auth-meta-row">
          <div class="form-check mb-0">
            <input class="form-check-input" type="checkbox" name="remember" id="id_remember">
            <label class="form-check-label" for="id_remember">Remember me</label>
          </div>
          <a href="{% url 'accounts:forgot_password' %}">Forgot password?</a>
        </div>

        {% if form.non_field_errors %}
        <div class="alert alert-danger rounded-3 py-2 small mb-3">
          {{ form.non_field_errors.0 }}
        </div>
        {% endif %}

        <button type="submit" class="btn btn-auth-primary">Sign in</button>
      </form>

      <div class="auth-alt">
        Don't have a student account?
        <a href="{% url 'accounts:student_signup' %}">Create Student Account</a>
      </div>
      <a class="auth-home" href="{% url 'home' %}"><i class="bi bi-house me-1"></i>Return to home</a>
    </div>
  </section>
</div>
{% endblock %}

{% block extra_js %}
<script>
  document.getElementById('togglePassword').addEventListener('click', function () {
    var inp = document.getElementById('id_password_input');
    var ico = document.getElementById('eyeIcon');
    if (inp.type === 'password') {
      inp.type = 'text';
      ico.className = 'bi bi-eye-slash';
    } else {
      inp.type = 'password';
      ico.className = 'bi bi-eye';
    }
  });
</script>
{% endblock %}